<template>
  <view class="recommend">
    <view class="title">
      <u--image width="300rpx" height="90rpx" :src="baseUrl + '/mini/bg/vip-r.png'" />
    </view>
    <view class="list">
      <view class="item" v-for="item in list" :key="item.id" @click="goProduct(item)">
        <u--image width="180rpx" height="180rpx" :src="baseUrl + item.mainImage.path" v-if="item.mainImage" />
        <view class="desc">
          <view class="title">{{item.title}}</view>
          <view class="title_sub">{{item.title_sub}}</view>
          <v-price :product="item" />
          <view class="buy">
            <view class="btn">立即抢购</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import config from '../../../../config/config'
import Price from '../../../../components/price/index'

export default {
  props: ['list'],
  data() {
    return {
      baseUrl: config.baseUrl,
    }
  },
  components: {
    'v-price': Price,
  },
  methods: {
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.recommend {
  margin: 20rpx;
  .title {
    display: flex;
    justify-content: center;
  }
  .list {
    .item {
      padding: 20rpx;
      background: white;
      border-radius: 20rpx;
      //min-height: 220rpx;
      margin-bottom: 20rpx;
      display: flex;
      .desc {
        flex: 1;
        //background: red;
        padding-left: 20rpx;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: start;
        .title {
          font-size: 24rpx;
          font-weight: 700;
        }
        .title_sub {
          color: #666666;
          font-size: 24rpx;
          margin: 10rpx 0;
        }
        .buy {
          display: flex;
          justify-content: flex-end;
          width: 100%;
          .btn {
            background: $main_color;
            color: white;
            font-size: 28rpx;
            padding: 5rpx 10rpx;
            border-radius: 10rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}
</style>
